<template>
  <view>

    <view class="header">
      <view class="search">
        <text class="cuIcon-search"></text>
        <input type="text" class="input" placeholder="搜索资讯" v-model="keyword" @confirm="getList" confirm-type="search"/>
      </view>
    </view>

    <scroll-view scroll-x class="nav" scroll-with-animation :scroll-left="classifyScrollLeft">
      <view class="cu-item classify" :class="index===classifyIndex?'classify-active cur':''"
            v-for="(item,index) in classifyList" :key="index" @click="classifyTabSelect(index)">
        {{ item.classifyName }}
      </view>
    </scroll-view>

    <view class="list">
      <view class="item" v-for="(item,i) in list" :key="i" @click="handleInformationClick(item)">
        <view class="left">
          <view class="title text-cut2">{{ item.title }}</view>
          <view class="bottom">
            <view class="info">
              <!--<image class="avatar" :src="item.help_face_img"></image>-->
              <text class="name text-cut">{{ item.writer }}</text>
            </view>
            <view class="actions">
              <!--<view class="action">-->
              <!--  <text class="cuIcon-share"></text>-->
              <!--  <text>{{ item.share }}</text>-->
              <!--</view>-->
            </view>
          </view>
        </view>
        <image class="cover" :src="item.cover"></image>
      </view>

      <list-loading v-if="loading"/>
      <list-empty v-if="!loading && (!list || list.length == 0)"/>
      <list-load-over v-else-if=" loadOver"/>
    </view>


  </view>
</template>

<script>
import Api from "@/utils/Api";
import ListLoading from "@/components/list/loading";
import ListEmpty from "@/components/list/empty";
import ListLoadOver from "@/components/list/loadOver";

export default {
  name: "index2",
  components: {ListLoadOver, ListEmpty, ListLoading},
  data() {
    return {
      classifyIndex: null,
      classifyScrollLeft: 0,
      classifyList: [],
      list: [],
      keyword: '',
      page: 0,
      loading: false,
      loadOver: false,
    }
  },
  methods: {
    classifyTabSelect(index) {
      if (index === this.classifyIndex) {
        this.classifyIndex = null
      } else {
        this.classifyIndex = index;
        this.classifyScrollLeft = (index - 1) * this.core.rpx2px(162)
      }
      this.clear();
      this.getList()
    },
    handleInformationClick(item) {
      uni.navigateTo({url: `/pages/index/information/info/index?id=${item.id}`})
    },
    getTypeList() {
      Api.getNewsClassify().then(res => {
        this.classifyList = res
      })
    },
    clear() {
      this.page = 0;
      this.list = [];
      this.loadOver = false;
      this.loading = false;
    },
    getList() {
      if (this.loadOver) return;
      this.loading = true;
      let data = {
        keyword: this.keyword,
        page: ++this.page
      }
      if (this.classifyIndex !== null) data.article_classify_id = this.currentTypeId;
      Api.getNewsList(data).then(res => {
        this.list.push(...res)
        if (res.length < 10) this.loadOver = true;
      }).finally(() => this.loading = false)
    },
  },
  computed: {
    currentTypeId() {
      let index = this.classifyIndex
      return index !== null ? this.classifyList[index].id : null;
    }
  },
  onLoad(options) {
    options = this.core.decodeURIComponentObject(options);
    this.getTypeList();
    this.getList();
  },
  onPullDownRefresh() {
    this.clear();
    this.getList();
  },
}
</script>

<style scoped lang='scss'>
.header {
  background-color: black;
  transform: translateY(-1px);
  padding: r(20px 100px);

  .search {
    flex: 1;
    height: r(56px);
    background: rgba(#F9F8FD, 0.93);
    border-radius: r(28px);
    display: flex;
    align-items: center;
    padding: r(0 28px);

    .input {
      margin-left: r(14px);
      font-size: r(24px);
      flex: 1;
      height: 100%;

      ::v-deep .uni-input-wrapper .uni-input-placeholder {
        font-size: r(24px);
      }
    }
  }
}

.classify {
  //width: r(152px);
  text-align: center;
}

.classify-active {
  color: #C38C3A;
  border: none !important;
}

.list {
  background-color: white;
  min-height: calc(100vh - #{r(96px)} - #{r(90px)} - var(--window-bottom));

  .item {
    width: 100%;
    display: flex;
    padding: r(30px);

    & + .item {
      border-top: 1px solid #f4f4f4;
    }

    .left {
      width: calc(100% - #{r(260px)});
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;


      .title {
        font-size: r(28px);
        color: #333333;
      }

      .bottom {
        display: flex;
        justify-content: space-between;
        color: #838181;
        font-size: r(24px);
        align-items: center;


        .info {
          display: flex;

          .avatar {
            width: r(40px);
            height: r(40px);
            border-radius: 50%;
            margin-right: r(10px);
          }

          .name {
            max-width: r(150px);
            margin-top: r(5px);
          }
        }

        .actions {
          display: flex;

          .action {
            margin-right: r(15px);
          }
        }
      }

    }

    .cover {
      height: r(144px);
      width: r(200px);
      margin-left: r(20px);
      flex-shrink: 0;
    }
  }
}
</style>